<template>
  <div class="top">
    <div class="conter">
      <ul>
        <li class="liebiao"><i class="iconfont icon-liebiao1"></i></li>
        <!--                <li class="btn"><i class="iconfont icon-ai-ios"></i></li>-->
        <!--                <li class="text">Mac</li>-->
        <!--                <li class="text">Mac</li>-->
        <!--                <li class="text">Mac</li>-->
        <!--                <li class="text">Mac</li>-->
        <!--                <li class="text">Mac</li>-->
        <!--                <li class="text">Mac</li>-->
        <!--                <li class="text">Mac</li>-->
        <li class="seerch"><i class="iconfont icon-sousuo"></i></li>
        <li class="btn"><i class="iconfont icon-bag"></i></li>
      </ul>
    </div>
  </div>
  <!--导航结束-->
  <div class="box boxf">
    <div class="textf">
      <h1>新广源</h1>

      <h2>人力资源中心.</h2>
    </div>
    <div class="formEntry">
      <div class="input-title">
        <span>姓名:</span>
        <el-input
          class="inputs"
          v-model="form.userName"
          size="medium"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="input-title">
        <span>性别:</span>
        <div class="inputs" style="line-height:40px">
          <el-radio
            v-model="form.sex"
            label="1"
            style="margin-left: 20px; color: #333"
            >男</el-radio
          >
          <el-radio
            v-model="form.sex"
            label="2"
            style="margin-left: -20px; color: #333"
            >女</el-radio
          >
        </div>
      </div>
      <div class="input-title">
        <span>年龄:</span>
        <el-input
          class="inputs"
          v-model="form.age"
          size="medium"
          placeholder="请输入内容"
        ></el-input>
      </div>
<!--      <div class="input-title">-->
<!--        <span>身高:</span>-->
<!--        <el-input-->
<!--          class="inputs"-->
<!--          v-model="form.date5"-->
<!--          size="medium"-->
<!--          placeholder="请输入内容"-->
<!--        ></el-input>-->
<!--      </div>-->
<!--      <div class="input-title">-->
<!--        <span>体重:</span>-->
<!--        <el-input-->
<!--          class="inputs"-->
<!--          v-model="form.date6"-->
<!--          size="medium"-->
<!--          placeholder="请输入内容"-->
<!--        ></el-input>-->
<!--      </div>-->
      <div class="input-title">
        <span>学历:</span>
        <el-input
          class="inputs"
          v-model="form.education"
          size="medium"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="input-title">
        <span>籍贯:</span>
        <el-input
          class="inputs"
          v-model="form.idCardAddr"
          size="medium"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="input-title">
        <span>手机号码:</span>
        <el-input
          class="inputs"
          v-model="form.mobile"
          size="medium"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="input-title">
        <span>身份证号码:</span>
        <el-input
          class="inputs"
          v-model="form.idCard"
          size="medium"
          placeholder="请输入内容"
        ></el-input>
      </div>
<!--      <div class="input-title">-->
<!--        <span>出生日期:</span>-->
<!--        <el-input-->
<!--          class="inputs"-->
<!--          v-model="form.birthday"-->
<!--          size="medium"-->
<!--          placeholder="请输入内容"-->
<!--        ></el-input>-->
<!--      </div>-->
<!--      <div class="input-title">-->
<!--        <span>政治面貌:</span>-->
<!--        <el-input-->
<!--          class="inputs"-->
<!--          v-model="form.date9"-->
<!--          size="medium"-->
<!--          placeholder="请输入内容"-->
<!--        ></el-input>-->
<!--      </div>-->
<!--      <div class="input-title">-->
<!--        <span>应聘岗位:</span>-->
<!--        <el-input-->
<!--          class="inputs"-->
<!--          v-model="form.date10"-->
<!--          size="medium"-->
<!--          placeholder="请输入内容"-->
<!--        ></el-input>-->
<!--      </div>-->
      <div class="sub">
        <el-button type="primary" size="medium" @click="jump('1')"
          >提交</el-button
        >
        <el-button type="info" plain size="medium" @click="jump('2')"
          >返回</el-button
        >
      </div>
    </div>

    <!--        <div class="shopimg iphoe_x"></div>-->
  </div>
</template>

<script>
import { userApi } from "@/api";
export default {
  name: "mobileForm",
  data() {
    return {
      form: {
        userName: "",
        mobile: "",
        idCard: "",
        region: "",
        idCardAddr: "",
        age: "",
        education: "",
        date4: "",
        date5: "",
        date6: "",
        date7: "0",
        birthday: "",
        date9: "",
        date10: "",
        delivery: true,
        type: ["步步高"],
        sex: "1",
        desc: "",
        options: [],
      },
    };
  },
  methods: {
    jump(e) {
      if (e == "1") {
        userApi.addUser(this.form).then((res) => {
          if (res) {
            this.$message.success("提交成功！");
          }
        });
        // this.$message({
        //     message: '入职资料提交成功!',
        //     type: 'success'
        // });
        this.$router.push("/mobileIndex");
      } else {
        this.$router.push("/mobileIndex");
      }
    },
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/t/font_729087_fxjtm9wz32.eot?t=1530501996109"); /* IE9*/
  src: url("//at.alicdn.com/t/font_729087_fxjtm9wz32.eot?t=1530501996109#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAagAAsAAAAACaQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kg3Y21hcAAAAYAAAAB3AAAByJtjz8RnbHlmAAAB+AAAAo0AAAMgPCBtEmhlYWQAAASIAAAALwAAADYR3rzVaGhlYQAABLgAAAAcAAAAJAfeA4dobXR4AAAE1AAAABMAAAAYF+kAAGxvY2EAAAToAAAADgAAAA4DDAICbWF4cAAABPgAAAAfAAAAIAEVAF1uYW1lAAAFGAAAAUUAAAJtPlT+fXBvc3QAAAZgAAAAPQAAAE45mP4aeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzzZG7438AQw9zA0AAUZgTJAQAqEwy5eJzFkUEOwyAMBMeFVFWVW77RS56RKu+JOPS9/gZdQzjkBVk0iF0ZGWFgApL4iAz2wwgdSq3liXfLM1/5mRcPnYvji6++1ar06oZM1WOFm3QztS5PbpPd1/qque376WIO5URPdDqR+9LR7+FrJ2bmW4f8BzaxGX8AeJyFUs1P1FAQf/Ne210KdN1ud7vbpbvblrYLC6tbSpdAWEhAwxKMRj4SQROM8YgxMQRIMOnF6MEYLxC4GhMPnDCiFxK/Lhuu6B9gNF444NGDFF9B48XE9yYz834zycz85iEWoePPZJekUQIVUQWNossIAVcCXcAqaLZbxiVIamxSlgRiG7YWMfQyGQRZ56SU47mWzEW4GAiQgx7N8ewytqHXreEBcFIqQCarTIpmm0ieAJ+2c/eDcfwUknmjLVbrDupdQ5JTSESXWkQxI4qPohzLRjFmYgIsyKkmtonngmdsTEnu5jtwHloytjJxtbWQFW88dG+rptwE4PuQyBaE50NxJU5lVUklxEzkTGs0rbQa7RIsfW1OJ1pU6wuiB9NZffKd3EEyMhFioQa9ZbAFiORAdrwqhAPZFZNiNahSjEYq5Fvw0+1nDl/uHDLM4c7EgyqwvCLxRx829xhmb3Mj1Bt1QH2Pr2wfsOzB9osDptIVHPNShn9NGutrDUIaa+sN8rv+K+IjA5Upyzmo0gpUTpug2sLV08o1kL0UrW9aXoikBExMfpUHw9IuVp3Rgf4L59xJfXxwpH3xfO+1grYwrC46zTeDj6zelpvpZPL9UzB/9zqw032VcYLbqTBwybkFxurACMZFwpQJWMN4fr97StU7cff0SAcitL935D01MZRHZ2mH4Q4lztB0axBcr+d/b3JPLRbVo6hq2yr+8W+foKLqho6rFoM3J+YECN7+xemuyAlX9CIRZcNt/VlV0ohTfjRKStw85Sqp0e8X0Wg4ruFPeHlubhlvQd3DyKtDgKhH7TGCLUiLARLTgGewX5pdwXhltnTk02CY7Je8MYzHPIrQFJqKS7SNX11Kl28AAAB4nGNgZGBgAGLnH+p68fw2Xxm4WRhA4Hr8nhwE/b+BhYG5AcjlYGACiQIAHAIKDQB4nGNgZGBgbvjfwBDDwgACQJKRARWwAQBHDAJveJxjYWBgYH7JwMDCgIoBEp8BAQAAAAAAAHYAtgEGAUwBkAAAeJxjYGRgYGBjCGRgZQABJiDmAkIGhv9gPgMAEUgBcwB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICNkYmRmZGFkZWRjZGdgbGCrTi/tLg0ny0xUzczv5gjJzM1KTMx35A5KTGdgQEArEgJ5AAAAA==")
      format("woff"),
    url("//at.alicdn.com/t/font_729087_fxjtm9wz32.ttf?t=1530501996109")
      format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url("//at.alicdn.com/t/font_729087_fxjtm9wz32.svg?t=1530501996109#iconfont")
      format("svg"); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sousuo:before {
  content: "\e613";
}

.icon-ai-ios:before {
  content: "\e631";
}

.icon-liebiao1:before {
  content: "\e649";
}

.icon-bag:before {
  content: "\e600";
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.top {
  width: 100%;
  height: 44px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  z-index: 999;
}

.conter {
  width: 1000px;
  height: 44px;
  margin: 0 auto;
}

.shop {
  width: 100%;
  overflow: hidden;
}

.conter ul {
  display: -webkit-flex; /* Safari */
  display: flex;
  list-style: none;
  justify-content: space-between;
}

.conter ul li {
  font-size: 14px;
  font-weight: 400;
  line-height: 44px;
  color: #fff;
}

.conter ul li:hover {
  color: #b6b6b6;
}

.liebiao {
  display: none;
}

.iconfont {
  font-size: 20px;
  font-weight: 400;
  line-height: 44px;
  color: #fff;
}

.iconfont:hover {
  color: #b6b6b6;
}

.box {
  width: 100%;
}

.boxf {
  margin-top: 40px;
  width: 100vw;
  /*height: 120vh;*/
  padding-bottom: 50px;
  background: url("../../src/assets/img/moblie.png") no-repeat;
  background-size: 100% 100%;
}

.formEntry {
  width: 100%;
  margin: 30px auto 0;
}
.sub {
  margin: 15px auto;
  width: 40%;
  display: flex;
  justify-content: space-between;
}
.input-title {
  width: 65%;
  height: 40px;
  margin: 8px auto 0;
  overflow: hidden;
}

.input-title span {
  width: 25%;
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  color: #333;
  line-height: 40px;
  margin-right: 5px;
  float: left;
  text-align: right;
  display: block;
}

.input-title .inputs {
  width: 65%;
  font-size: 12px;
  font-weight: 600;
  height: 40px;
  color: #111;
  float: right;
}

.ipad {
  background: rgb(245, 245, 245);
}

.iphone8 {
  /*background:rgb(249,230,240);*/
}

.box .textf {
  padding-top: 88px;
}

.box .textf h1 {
  text-align: center;

  width: 100%;
  margin: 0 auto;
  font-size: 60px;
  font-weight: 600;
  color: #111;
}

.box .textf h2 {
  text-align: center;

  width: 100%;
  margin: 10px auto;
  font-size: 30px;
  font-weight: 400;
  color: #111;
}

.box .wrapper {
  margin-top: 15px;
  text-align: center;
}

.box .wrapper a {
  text-decoration: none;
  font-size: 25px;
  font-weight: 400;
  margin-right: 20px;
  color: #0070c9;
}

.box .shopimg {
  z-index: 1;
  margin: 60px auto 0;
  width: 1068px;
  height: 337px;
}

.box .iphoe_x {
  background: url("../assets/phone/behind_the_mac_large.jpg") no-repeat center;
}

.box .iphoe_8 {
  background: url("../assets/phone/iphone_8_large.jpg") no-repeat center;
  background-size: 537px 378px;
}

.box .ipd {
  background: url("../assets/phone/ipad_large.jpg") no-repeat center;
  background-size: 930px 355px;
}

.shop ul {
  list-style: none;
  width: 100%;
}

.shop ul li {
  width: 49%;
  height: 580px;
  margin: 12px 0.25% 12px 0.5%;
  float: left;
  background: rgb(238, 238, 238);
}

.shop ul li:nth-child(5) {
  background: rgb(250, 250, 250);
}

.shop ul li:nth-child(6) {
  background: rgb(250, 250, 250);
}

.bkimg {
  width: 100%;
  height: 100%;
}

.shop_top {
  width: 100%;
  height: 140px;
}

.shop_top .watch {
  display: block;
  width: 131px;
  height: 40px;
  margin: 0 auto;
  padding-top: 41px;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  color: #111;
}

.shop_top .watchf {
  display: block;
  text-align: center;
  height: 40px;
  margin: 0 auto;
  padding-top: 41px;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  color: #111;
}

.shop_top h4 {
  text-align: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 80px;
  font-size: 40px;
  line-height: 1.2381;
  font-weight: 400;
  color: #fff;
}

.shop_top h5 {
  text-align: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 10px;
  font-size: 24px;
  line-height: 1.2381;
  font-weight: 400;
  color: #fff;
}

.shop_top .color {
  color: #111;
}

.shop_bottom {
  text-align: center;
}

.shop_bottom a {
  font-size: 20px;
  font-weight: 400;
  color: #0070c9;
}

.shopone {
  background: url("../assets/phone/watch_series_3_large.jpg") no-repeat center
    bottom 0;
}

.shoptwo {
  background: url("../assets/phone/how_to_shoot_large.jpg") no-repeat center
    bottom 0;
}

.shopthree {
  background: url("../assets/phone/music_three_months_large.jpg") no-repeat
    center bottom 0;
}

.shopfour {
  background: url("../assets/phone/behind_the_mac_large.jpg") no-repeat center
    bottom 0;
}

.shopfive {
  background: url("../assets/phone/airpods_large.jpg") no-repeat center bottom 0;
}

.shopsix {
  background: url("../assets/phone/homepod_large.jpg") no-repeat center bottom 0;
}

.footer {
  width: 100%;
  background: rgb(242, 242, 242);
  margin-bottom: 0;
  overflow: hidden;
}

.foot_nav {
  width: 1000px;
  margin: 0 auto;
  background: rgb(242, 242, 242);
}

.foot_nav .toot_titf {
  margin-bottom: 7px;
  padding: 20px 0 8px;
  border-bottom: 1px solid #d6d6d6;
  font-size: 11px;
  color: #888;
}

.foot_nav .toot_titf a {
  color: #0070c9;
}

.foot_nav .toot_titf a:hover {
  text-decoration: underline;
}

.foot_nav .toot_tits {
  color: #888;
  padding: 0 0 30px;
  font-size: 11px;
}

.fromtxt {
  width: 100%;
  overflow: hidden;
  padding-top: 50px;
}

.foot_nav dl {
  width: 20%;
  float: left;
}

.foot_nav dl dt {
  font-weight: 600;
  display: block;
  margin-bottom: 9px;
  font-size: 9px;
}

.foot_nav dl dd {
  display: block;
  margin-bottom: 9px;
  color: #555;
  font-size: 11px;
}

.foot_nav dl dd a {
  color: #555;
}

.foot_nav dl dd a:hover {
  text-decoration: underline;
}

.foot_nav dl dt span {
  display: none;
}

.foot_nav dl dt span:hover {
  cursor: pointer;
}

.box .wrapper a:hover {
  text-decoration: underline;
}

.shop_bottom a:hover {
  text-decoration: underline;
}

.toot_tits .userleft {
  margin-top: 5px;
  margin-right: 30px;
  float: left;
}

.toot_tits .usercenters {
  margin-right: 30px;
  float: left;
}

.toot_tits .usercenters a {
  border-right: 1px solid #d6d6d6;
  margin-right: 7px;
  padding-right: 10px;
  display: inline-block;
  margin-top: 5px;
  white-space: nowrap;
  color: #555;
}

.toot_tits .usercenters a:hover {
  text-decoration: underline;
}

.toot_tits .usercenters a:nth-child(5) {
  border: none;
}

.toot_tits .userright {
  float: right;
  margin-top: 5px;
  position: relative;
  top: -3px;
  z-index: 2;
  white-space: nowrap;
}

.toot_tits .userright span {
  background-repeat: no-repeat;
  background-size: 16px 16px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../assets/phone/16.png);
  padding-right: 5px;
  background-position: left center;
  cursor: pointer;
  float: left;
  margin-top: -1px;
}

.toot_tits .userright a {
  color: #555;
}

.toot_tits .userright a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1024px) {
  .conter {
    width: 100%;
  }

  .conter ul {
    padding: 0 14px;
  }

  .box .shopimg {
    width: 763px;
    height: 336px;
  }

  .box .iphoe_x {
    background-size: 736px 336px;
  }

  .box .iphoe_8 {
    background-size: 537px 378px;
  }

  .box .ipd {
    background-size: 650px 325px;
  }

  .foot_nav {
    width: 100%;
  }

  .toot_tits .userright {
    margin-top: 10px;
    margin-right: 10px;
  }

  .toot_tits .usercenters {
    margin: 5px 50px 30px 0;
  }

  .footer {
    padding-left: 16px;
  }
}

@media screen and (max-width: 768px) {
  .liebiao {
    display: block;
  }

  .text,
  .seerch {
    display: none;
  }

  .box .shopimg {
    width: 320px;
    height: 353px;
  }

  .box .iphoe_x {
    background: url("../assets/phone/127.jpg") no-repeat center;
  }

  .box .iphoe_8 {
    background: url("../assets/phone/gc.jpg") no-repeat center;
  }

  .box .ipd {
    background: url("../assets/phone/zps.png") no-repeat center;
  }

  .shop ul li {
    width: 99%;
  }

  .foot_nav dl dd {
    display: none;
  }

  .foot_nav dl {
    width: 100%;
    margin: 0 auto;
  }

  .foot_nav {
    width: 100%;
  }

  .fromtxt {
    padding-top: 21px;
  }

  .foot_nav dl dt {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding: 15px 0 10px 16px;
  }

  .foot_nav dl dt span {
    display: block;
    float: right;
    font-size: 13px;
    padding-right: 16px;
  }

  .foot_nav .toot_titf {
    padding: 20px 0 8px 16px;
  }

  .toot_tits .userright {
    width: 80%;
    padding: 10px 0 0 16px;
    float: left;
  }

  .toot_tits .userleft {
    padding-left: 16px;
  }

  .toot_tits .usercenters {
    padding-left: 16px;
    margin-bottom: 28px;
  }
}
</style>